<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="d3-tip.css">
    <style>
        ul,li{
            margin:0;
            padding:0;
            list-style-type:none;
        }
        canvas,ul{
            float:right;
        }
        ul{
            margin-right:30px;
        }
        li{
            margin-top:50px;
        }
        button{
            margin-right:10px;
        }
    </style>
</head>
<body>
    <text dominant-baseline=""></text>
    <script src="d3.min.js"></script>
    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <script src="d3-tip.js"></script>
    <script src="topojson.min.js"></script>
    <script>

        

        const width = 800 ;
        const height = 600 ;
        const margin = 50 ;

        const svg = d3.select('body').append('svg');
        svg.attr('width',width);
        svg.attr('height',height);
        svg.style('border','2px solid #ccc');
        
        var tip = d3.tip()
        .attr('class', 'd3-tip')
        .html(function(e,d) { return d.properties.name ; })
        tip.direction('e')
        tip.offset([0, -0])
        svg.call(tip);
        (async ()=>{
            let data = await d3.json('countries.json');
            //let data = await d3.json('china-topo.json');
            console.log(data);

            //data = topojson.feature(data,data.objects['china-geo']);
            data = topojson.feature(data,data.objects['countries']);
            console.log(data);

        

            //const projections = d3.geoMercator()
            const projections = d3.geoAzimuthalEqualArea()
               //.fitExtent([[0,0],[600,600]],data)
               //.fitSize([width,height],data)
               .fitExtent([[50,50],[width-50,height-50]],data)
        
            //projections.scale(1200)
            //projections.translate([width/2,height/2])
            
            const path = d3.geoPath()//.projection(projection)
           
            //projections.center(centroid);
            
            path.projection(projections)
            const centroid = path.centroid(data.features[5]);
           // console.log(centroid);

           const g = svg.append('g');
           g.append('g').attr('class','g-area')
                .selectAll('path')
                .data(data.features)
                .join('path')
                .attr('d',path)
                .attr('fill',(d,i)=>d3.schemeSet3[i%d3.schemeSet3.length])
                .attr('stroke','#666')
                .on('mouseover',function(e,d){
                    d3.select(e.target)
                      .attr('stroke-width',2)
                      .attr('stroke','#ccc')
                      .attr('opacity',0.5)
                    tip.show(e,d)  
                })
                .on('mouseout',function(e,d){
                    d3.select(e.target)
                        .attr('stroke-width',1)
                        .attr('stroke','#666')
                        .attr('opacity',1)
                    tip.hide(e,d)    
                })

            // g.append('g')
            //     .selectAll('text')
            //     .data(data.features)
            //     .join('text')
            //     .attr('x',d=>path.centroid(d)[0])
            //     .attr('y',d=>path.centroid(d)[1])
            //     .text(d=>d.properties.name)
            //     .attr('font-size',8)
            //     .attr('text-anchor','middle')    



            const graticule = d3.geoGraticule()
               // .step([10,0])
            console.log(graticule.outline());
            g.append('g').attr('class','g-line')
                .append('path')
                .datum(graticule())
                .attr('d',path)
                .attr('fill','none')
                .attr('stroke','steelblue')


                
            const yplus = document.querySelector('#yplus');   
            const yminus = document.querySelector('#yminus');   
            const xplus = document.querySelector('#xplus');   
            const xminus = document.querySelector('#xminus');   
            const zplus = document.querySelector('#zplus');   
            const zminus = document.querySelector('#zminus');    
            let degx = 0 ;
            let degy = 0 ;
            let degz = 0 ;
            xplus.onclick = function(){
              degx += 30;
              rotateEarth(); 
            }
            yplus.onclick = function(){
              degy += 30;
              rotateEarth(); 
            }
            zplus.onclick = function(){
              degz += 30;
              rotateEarth(); 
            }
            xminus.onclick = function(){
              degx -= 30;
              rotateEarth(); 
            }
            yminus.onclick = function(){
              degy -= 30;
              rotateEarth(); 
            }
            zminus.onclick = function(){
              degz -= 30;
              rotateEarth(); 
            }

            function rotateEarth(){
                projections.rotate([degx,degy ,degz]);
                
                g.select('.g-area')
                 .selectAll('path')
                 .attr('d',path)

                g.select('.g-line')
                 .selectAll('path')
                 .attr('d',path) 
            }

        })();
         
    </script>
    <ul>
        <li>
            <button id="xplus">x+</button>
            <button id="xminus">x-</button>
        </li>
        <li>
            <button id="yplus">y+</button>
            <button id="yminus">y-</button>
        </li>
        <li>
            <button id="zplus">z+</button>
            <button id="zminus">z-</button>
        </li>
    </ul>
</body>
</html>